<template>
    <!--租户预警设置-->
    <div>
        <section>
            <el-form ref="form" :model="queryForm" label-width="82px" :inline="true" class="queryForm">
                <el-form-item label="预警名称:">
                    <el-input v-model="queryForm.names" size="small" placeholder="请输入预警名称关键字"></el-input>
                </el-form-item>
                <el-form-item>
                    <div class="but-container">
                        <el-button type="primary" size="small" style="margin-right:5px" @click="
                getList(
                  page,
                  orderBy.name,
                  orderBy.method,
                  queryForm.names
                )
              ">查询</el-button>
                        <el-button size="small" @click="reset">重置</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </section>
        <div style="margin-top: -10px">
            <section class="right-but" style="display:flex">
                <el-button type="text" style="margin-right:-13px" @click="getList(page,orderBy.name,orderBy.method)">
                    <img style="width:44px;height:36px;" src="~@/assets/img/shuaxin.png">
                </el-button>
                <PopoverBut :checkedProps="checkedProps" :options="options" @getCheckeds="handlerCloumn"></PopoverBut>
            </section>
        </div>


        <el-table size="mini" v-loading="loading" :data="tableData" style="width: 100%; margin-top: 10px" border
            :header-cell-style="{
        'background-color': '#eeeeee !important',
      }" :row-class-name="tableRowClassName"
            @sort-change="sortthiscolumn">
            <el-table-column type="index" label="序号" width="70" align="center">
                <template slot-scope="scope">
                    <span>{{
                        (page.pageNo - 1) * page.pageSize + scope.$index + 1
                      }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="warnName" label="预警名称"></el-table-column>
            <el-table-column prop="warnTypeStr" label="预警类型">
                <template slot-scope="scope">
                  <section>
                    <i></i>
                     {{$dictUtils.getDictLabel("warnType", scope.row.warnType, "")}}
                  </section>
                </template>
            </el-table-column>
            <el-table-column prop="userIds" label="预警处理人"></el-table-column>
            <el-table-column prop="roleIds" label="预警处理角色"></el-table-column>
            <el-table-column prop="state" label="状态" width="100px" align="center">
                <template slot-scope="scope">
                    <section class="activate-state" v-if="scope.row.state===1">
                        <i></i>
                         {{$dictUtils.getDictLabel("state", scope.row.state, "")}}
                    </section>
                    <section class="inactive-state" v-else>
                        <i></i>
                        {{$dictUtils.getDictLabel("state", scope.row.state, "")}}
                    </section>
                </template>
            </el-table-column>

            <span v-for="(item, index) in checkedProps" :key="index">
                <el-table-column prop="createDate" :label="item" v-if="item==='创建时间'"></el-table-column>
                <el-table-column prop="createBy.loginName" :label="item" v-if="item==='创建人'"></el-table-column>
                <el-table-column prop="updateDate" :label="item" v-if="item==='上次操作时间'"></el-table-column>
                <el-table-column prop="updateBy.loginName" :label="item" v-if="item==='上次操作人'"></el-table-column>
            </span>

            <el-table-column prop="address" label="操作" width="252">
                <template slot-scope="scope">
                    <el-link type="primary" :underline="false" @click="edit(scope.row)" v-if="hasPermission('warn:warnUser:edit')">设置
                    </el-link>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="page.pageSize"
            :current-page="page.pageNo" layout="total,prev, pager, next, jumper" :total="page.total">
        </el-pagination>
        <EditForm ref="EditForm" @refreshDataList="getList(page,orderBy.name,orderBy.method)"></EditForm>

    </div>
</template>
<script>
    import {
        getList,
        del,
        updateState
    } from '@/api/warn/WarnUser.js';
    import EditForm from './WarnUserEditForm'
    import PopoverBut from '@/components/button/popoverBut'
    const options1 = []
    const cityOptions = ['上海', '北京']
    export default {
        components: {
            EditForm,
            PopoverBut
        },

        data() {
            return {
                msg: '',
                data: [],
                repeatIds: [],
                checkedProps: options1,
                ShowCloum: {
                    createDate: ''
                },
                options: [{
                        label: '上次操作人',
                        key: 'updateBy.loginName'
                    },
                    {
                        label: '上次操作时间',
                        key: 'updateDate'
                    },
                    {
                        label: '创建人',
                        key: 'createBy.loginName'
                    },
                    {
                        label: '创建时间',
                        key: 'createDate'
                    }
                ],
                tableData: [],
                orderBy: {
                    name: 'update_date',
                    method: 'desc'
                },
                loading: false,
                page: {
                    pageSize: 10,
                    pageNo: 1,
                    total: 0
                },
                props: 1,
                queryForm: {
                    checkedCities: 0,
                    productName: '',
                    productId: ''
                },
                checkedCities: [],
                cities: cityOptions
            }
        },
        methods: {
            // 获取列表带分页
            getList(params, orderName, orderByAORC, queryNames, queryState) {
                this.loading = true
                getList({
                    pageSize: params.pageSize,
                    pageNo: params.pageNo,
                    orderBy: orderName,
                    orderByAORC: orderByAORC,
                    names: queryNames,
                    state: queryState
                }).then((res) => {
                    if (res.data.code === '200') {
                        this.tableData = res.data.result.list
                        this.page.total = res.data.result.count
                    }
                    this.loading = false
                })
            },
            // 删除
            del(ids, state) {
                if (state === 1) {
                    this.$notify.error({
                        title: '错误',
                        message: '已启用，不支持删除！'
                    });
                } else if (state === 0) {
                    this.$notify.error({
                        title: '错误',
                        message: '已停用，不允许任何操作！'
                    });
                } else if (state === -1) {
                    this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then((res) => {
                        del({
                            ids: ids
                        }).then((res) => {
                            if (res.data.code === '200') {
                                this.$message({
                                    type: 'success',
                                    message: '已删除!'
                                })
                                this.getList(this.page, this.orderBy.name, this.orderBy.method)
                            }
                        })
                    });
                }
            },
            // 添加
            add() {
                this.$refs.EditForm.init('add')
            },
            // 改变状态
            editState(state, row) {
                this.$confirm('是否修改状态?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then((res) => {
                    updateState({
                        id: row.id,
                        state: state
                    }).then(res => {
                        if (res.data.code === '200') {
                            this.$message({
                                type: 'success',
                                message: '状态修改成功'
                            })
                            this.getList(this.page, this.orderBy.name, this.orderBy.method)
                        }
                    })
                })
            },
            // 编辑
            edit(row) {
                this.$refs.EditForm.init('edit', row)
            },
            // 是否显示某列数据
            handlerCloumn(e) {
                this.checkedProps = e
                // console.log(e)
            },
            // 重置查询条件
            reset() {
                this.queryForm = {}
            },
            // 排序
            sortthiscolumn(a) {
                console.log(a)
                this.orderBy.name = a.prop
                this.page.pageNo = 1
                if (a.order === 'ascending') {
                    this.orderBy.method = 'asc'
                } else {
                    this.orderBy.method = 'desc'
                }
                this.getList(this.page, this.orderBy.name, this.orderBy.method)
            },
            handleSizeChange() {},
            handleCurrentChange(e) {
                this.page.pageNo = e
                this.getList(this.page, this.orderBy.name, this.orderBy.method)
                console.log(e)
            },
            tableRowClassName({
                row,
                rowIndex
            }) {
                if (rowIndex % 2 === 1) {
                    return 'warning-row'
                } else {
                    return 'success-row'
                }
            }
        },
        mounted() {
            this.getList(this.page, this.orderBy.name, this.orderBy.method)
        }
    }
</script>
<style lang="scss" scoped>
    ::v-deep .el-input--small .el-input__inner {
        height: 36px;
        line-height: 32px;
        width: 230px;
    }

    .queryForm {
        position: relative;

        .but-container {
            top: 10px;
            margin-left: 20px;
        }

        .el-form-item {
            margin-right: 30px;
        }
    }

    .el-table .success-row {
        background: #f0f9eb;
    }

    ::v-deep .el-table .warning-row {
        background: #f7f7f7;
    }
</style>
